{% extends "base.html" %}

{% block page_title %}仪表板{% endblock %}

{% block content %}
<!-- 系统统计卡片 -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h6 class="card-title">总设备数</h6>
                        <h3>{{ system_stats.total_devices }}</h3>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-desktop fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-success text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h6 class="card-title">在线设备</h6>
                        <h3>{{ system_stats.online_devices }}</h3>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-check-circle fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-info text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h6 class="card-title">CPU使用率</h6>
                        <h3>{{ "%.1f"|format(system_stats.cpu_percent) }}%</h3>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-microchip fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-warning text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h6 class="card-title">内存使用率</h6>
                        <h3>{{ "%.1f"|format(system_stats.memory_percent) }}%</h3>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-memory fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- 设备状态列表 -->
    <div class="col-md-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5><i class="fas fa-desktop"></i> 设备状态</h5>
                <a href="{{ url_for('add_device') }}" class="btn btn-primary btn-sm">
                    <i class="fas fa-plus"></i> 添加设备
                </a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>设备名称</th>
                                <th>IP地址</th>
                                <th>类型</th>
                                <th>状态</th>
                                <th>最后检查</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for device in devices %}
                            <tr>
                                <td>{{ device.name }}</td>
                                <td>{{ device.ip_address }}</td>
                                <td>
                                    <span class="badge bg-secondary">
                                        {% if device.device_type == 'router' %}路由器
                                        {% elif device.device_type == 'switch' %}交换机
                                        {% elif device.device_type == 'server' %}服务器
                                        {% elif device.device_type == 'workstation' %}工作站
                                        {% elif device.device_type == 'printer' %}打印机
                                        {% else %}其他
                                        {% endif %}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge 
                                        {% if device.status == 'online' %}bg-success
                                        {% elif device.status == 'offline' %}bg-danger
                                        {% else %}bg-secondary
                                        {% endif %}">
                                        {% if device.status == 'online' %}在线
                                        {% elif device.status == 'offline' %}离线
                                        {% else %}未知
                                        {% endif %}
                                    </span>
                                </td>
                                <td>{{ device.last_check.strftime('%H:%M:%S') if device.last_check else '未检查' }}</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary" onclick="checkDevice({{ device.id }})">
                                        <i class="fas fa-sync"></i>
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 系统日志 -->
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-list-alt"></i> 最近日志</h5>
            </div>
            <div class="card-body">
                <div class="log-container" style="max-height: 400px; overflow-y: auto;">
                    {% for log in recent_logs %}
                    <div class="mb-2 p-2 border-start border-3 
                        {% if log.level == 'error' %}border-danger
                        {% elif log.level == 'warning' %}border-warning
                        {% else %}border-info
                        {% endif %}">
                        <small class="text-muted">{{ log.timestamp.strftime('%H:%M:%S') }}</small>
                        <div class="small">{{ log.message }}</div>
                    </div>
                    {% endfor %}
                </div>
                <div class="text-center mt-3">
                    <a href="{{ url_for('logs') }}" class="btn btn-outline-primary btn-sm">查看全部日志</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 系统性能图表 -->
<div class="row mt-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-chart-pie"></i> 系统资源使用率</h5>
            </div>
            <div class="card-body">
                <canvas id="systemChart" width="400" height="200"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-network-wired"></i> 网络流量统计</h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-6">
                        <h6>发送字节</h6>
                        <h4 class="text-primary">{{ "{:,}".format(system_stats.network_io.bytes_sent) }}</h4>
                    </div>
                    <div class="col-6">
                        <h6>接收字节</h6>
                        <h4 class="text-success">{{ "{:,}".format(system_stats.network_io.bytes_recv) }}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 系统资源图表
const ctx = document.getElementById('systemChart').getContext('2d');
const systemChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['CPU', '内存', '磁盘'],
        datasets: [{
            data: [
                {{ system_stats.cpu_percent }},
                {{ system_stats.memory_percent }},
                {{ system_stats.disk_percent }}
            ],
            backgroundColor: [
                '#007bff',
                '#28a745',
                '#ffc107'
            ]
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false
    }
});

// 检查设备状态
function checkDevice(deviceId) {
    fetch(`/api/device_status/${deviceId}`)
        .then(response => response.json())
        .then(data => {
            location.reload();
        })
        .catch(error => {
            console.error('Error:', error);
            alert('检查设备状态失败');
        });
}

// 自动刷新页面数据
setInterval(function() {
    fetch('/api/system_stats')
        .then(response => response.json())
        .then(data => {
            // 更新统计卡片
            document.querySelector('.card.bg-primary h3').textContent = data.total_devices;
            document.querySelector('.card.bg-success h3').textContent = data.online_devices;
            document.querySelector('.card.bg-info h3').textContent = data.cpu_percent.toFixed(1) + '%';
            document.querySelector('.card.bg-warning h3').textContent = data.memory_percent.toFixed(1) + '%';
            
            // 更新图表
            systemChart.data.datasets[0].data = [
                data.cpu_percent,
                data.memory_percent,
                data.disk_percent
            ];
            systemChart.update();
        })
        .catch(error => console.error('Error:', error));
}, 30000); // 每30秒刷新一次
</script>
{% endblock %}
